<template>
    <div class='de'>
        <!-- <van-swipe :autoplay="3000" :width="375" :height="277">
        <van-swipe-item v-for="(image, index) in images" :key="index">
            <img v-lazy="image.banner_img_url" />
        </van-swipe-item>
        </van-swipe> -->
        <van-image
        width="375"
        height="277"
        :src="list.pimg"
        />
        <van-icon name="arrow-left" size='30px' class='go' @click='map' color='gray' />
        <h3>{{list.pname}}</h3>
        <h5>{{list.pdesc}}</h5>
        <p>￥{{list.pprice}}</p>
        <van-row type='flex'>
            <van-col span="6" offset="1"><span class='sp1'>加入会员</span></van-col>
            <van-col span="6" offset="1"><span class='sp2'>再减10元</span></van-col>
            <van-col span="8" offset="5"><span class='sp3'>快递： 免邮</span></van-col>
            <van-col span="8" ><span class='sp4'>销量： 6666</span></van-col>
        </van-row>

        <div class='shadow'></div>
        <van-cell title="请选择：尺码" is-link @click="tap" />
        <div class='shadow'></div>
        <van-row type="flex" justify="center">
            <van-col span="6"><span class='sp5'>商品参数</span></van-col>
        </van-row>
        <van-row type='flex'>
            <van-col span="10" offset="1"><span class='sp6'>品牌：{{list.gname}}</span></van-col>
            <van-col span="10" offset="3"><span class='sp6'>面料：{{list.material}}</span></van-col>
        </van-row>
        <van-row type='flex'>
            <van-col span="10" offset="1"><span class='sp7'>免邮： 部分地区除外</span></van-col>
        </van-row>
        <div class='shadow'></div>
        <van-row type="flex" justify="center">
            <van-col span="6"><span class='sp5'>商品介绍</span></van-col>
        </van-row>
         <van-row type="flex">
            <van-col span="6" offset="1"><span class='sp5'>商品描述</span></van-col>
        </van-row>
        <div class='shadow1'></div>
         <van-row type="flex">
            <van-col span="10" offset="1"><span class='sp5'>{{list.detail}}</span></van-col>
        </van-row>
        <div class='shadow'></div>
        <van-row type="flex">
            <van-col span="6" offset="1"><span class='sp5'>买家需知</span></van-col>
        </van-row>
        <div class='shadow1'></div>
        
        
        <div class='shadow2' id='sh'></div>
            
        <van-goods-action class='van'>
            <van-goods-action-icon
                icon="chat-o"
                text="客服"
                @click="kap"
            />
            <van-goods-action-icon
                icon="cart-o"
                text="购物车"
                @click="gap"
            />
            <van-goods-action-button
                type="warning"
                text="加入购物车"
                @click="jap"
            />
            <van-goods-action-button
                type="danger"
                text="立即购买"
                @click="lap"
            />
        </van-goods-action>


       <van-action-sheet v-model="show" class='tan'>
        <van-card
            :price="list.price"
            desc="请选择：尺码"  
            :thumb="list.picture.path"
        />
        <div class='shd'></div>
        <van-row>
            <van-col span="3" offset="1" class='sp9'>尺码</van-col>
        </van-row>
        <van-row class='ro' >
            <van-col span="24" offset="1" class='sp10'>
                <button 
                v-for='item in list1' 
                :key="item.sname"
                :class="{active : active == item.sname}"
                @click="selected(item.sid)">
                {{item.sname}}
                </button>
            </van-col>
        </van-row>
        <van-row>
            <van-col span="5" offset="1" class='sp9'>购买数量</van-col>
            <van-col span="8" offset="10" class='sp9'><van-stepper v-model="value" @change='num' integer/></van-col>
        </van-row>
        <div class='con' @click='confi'>
            确认
        </div>
        <van-row type="flex" justify="center">
            <van-col span="6"><span class='sp5'>商品介绍</span></van-col>
        </van-row>
         <van-row type="flex">
            <van-col span="6" offset="1"><span class='sp5'>商品描述</span></van-col>
        </van-row>
        <div class='shadow1'></div>
         <van-row type="flex">
            <van-col span="10" offset="1"><span class='sp5'>商品描述内容区域</span></van-col>
        </van-row>
        <div class='shadow'></div>
        <van-row type="flex">
            <van-col span="6" offset="1"><span class='sp5'>买家需知</span></van-col>
        </van-row>
        </van-action-sheet>



    </div>
</template>

<script>
import axios from 'axios'
import { Dialog } from 'vant';
import qs from 'Qs'
export default {
    name:'Detail',
    data () {
        return {
            images: [],
            show:false,
            imageURL:'',
            value:'',
            list:[],
            list1:[],
            active:'',
            chi:'',
        }
    },
    mounted () {
        var _this=this
            // 商品详情
            axios({
            method:'post',
            url:'http://10.8.158.3:8080/sportapp/picturetogoods.do',
            headers:{'Content-Type':'application/x-www-form-urlencoded'},
            data:qs.stringify({
               
                token:_this.$store.state.token,
                pid:_this.$route.params.pid
                })
            }).then((res)=>{
                console.log(res.data.info)
                _this.list=res.data.info
            })
            axios({
            method:'post',
            url:'http://10.8.158.3:8080/sportapp/sizeall.do',
            headers:{'Content-Type':'application/x-www-form-urlencoded'},
            data:qs.stringify({
               
                token:_this.$store.state.token,
                // pid:_this.$route.params.pid
                })
            }).then((res)=>{
                console.log(res.data.info)
                _this.list1=res.data.info
            })
            
    },
    methods: {
         
        map(){
            this.$router.go(-1)
        },
        tap(){
            this.show=true
        },
        kap(){
            
        },
        gap(){
            this.$router.push('/cart')
        },
        jap(){
            var _this=this
            // 把商品添加到购物车
            
            // 这是获取到选中的尺码和数量的代码
            console.log(this.active,this.value)
            // axios({
            //     method:'get',
            //     url:'http://jx.xuzhixiang.top/ap/api/add-product.php',
            //     params:
            //         {
            //             uid:'11003',
            //             pid:this.$route.params.id,
            //             pnum:_this.value
            //         }   
            // }).then((res)=>{
            //     Dialog({ message: '添加购物车成功' });
            // })
            // 添加购物车

            axios({
            method:'post',
            url:'http://10.8.158.3:8080/sportapp/addCat.do',
            headers:{'Content-Type':'application/x-www-form-urlencoded'},
            data:qs.stringify({
                token:_this.$store.state.token,
                uid:_this.$store.state.uid,
                cnum:_this.value,
                cid:'',
                gid:_this.$route.params.pid,
                sid:_this.active,
                }),
            }).then((res)=>{
                // _this.images=res.data.info
                console.log(res)
                // Dialog({ message: '添加购物车成功' })
            })


        },
        lap(){
             this.$router.push('/sure')
        },
        selected(name){
            console.log(name)
            this.active = name;
        },
        num(){
            
        },
        confi(){
            this.show=false
        }
    }
}
</script>

<style scoped>
.go{
    position:fixed;
    left: 13px;
    top:16px;
}
.sp1{
width: 60px;
height: 20px;
background: gray;
font-size: 12px;
}
.sp2{
width: 51px;
height: 17px;
font-size: 12px;
}
.sp3{
width: 60px;
height: 17px;
font-size: 12px;
}
.sp4{
width: 65px;
height: 17px;
font-size: 12px;
}
.sp5{
width: 56px;
height: 20px;
font-size: 14px;
}
.sp6{
width: 59px;
height: 17px;
font-size: 12px;
}
.sp7{
width: 108px;
height: 17px;
font-size: 12px;
}
.sp8{
width: 108px;
height: 10px;
border-right:1px solid silver;
background: red;
}
.sp9{
font-size: 14px;
color: silver;
}
.shadow{
    width: 375px;
    height: 10px;
    background:silver;
    margin-top:10px;
    margin-bottom:10px;
}
.shadow1{
    width: 375px;
    height: 2px;
    background:silver;
    margin-top:10px;
    margin-bottom:10px;
}
.shadow2{
    width: 375px;
    height: 10px;
    background:silver;
    margin-top:5px;
}
#sh{
    margin-bottom: 50px;
}
.shd{
    width: 375px;
    height: 2px;
    background:silver;
    margin-bottom:10px;
}
.ro{
    margin-top: 10px;
    margin-bottom: 20px;
}
.ro button{
    margin-left: 60px;
}
.con{
    margin-top: 50px;
    width:auto;
    height: 50px;
    background: silver;
    font-size: 20px;
    line-height: 50px;
    text-align: center;
    margin-bottom: 20px;
}
.active{
    background: black;
    border: 1px solid silver;
    color: #fff;
}
</style>
